<template>
  <div class="main">
    <svg :viewBox="`0 0 ${width} ${heightNum}`" stroke-width="0.5" class="item">
      <rect fill="none" stroke="#333" stroke-dasharray="5 3"
            :x="margin" :y="margin" :width="width - 2 * margin" :height="heightNum - 2 * margin"></rect>
      <path fill="none" stroke="#ccc" :d="hexbin.mesh()"></path>

      <g font-family="sans-serif" font-size=12>
        <text v-for="(item,index) in center" :key="index" :transform="`translate(${item[0]},${item[1]})`" dy="0.38em" text-anchor="middle">{{index}}</text>
      </g>
      <path fill="none" stroke="red" stroke-width=2 :d="hexbin1.mesh()"></path>
    </svg>
    <el-card class="item sub">
      <div v-for="o in 4" :key="o">
        {{'图标说明 ' + o }}
      </div>
    </el-card>
  </div>
</template>

<script>
import * as d3 from 'd3-hexbin';
export default {
  name: "HexbinCenters",
  data() {
    return {
      r:20.5,
      width:400,
    }
  },
  beforeCreate() {
  },
  props:['height'],
  created() {

  },
  computed: {
    heightNum(){
      return this.height.slice(0, -2) || 300
    },
    margin(){
      return 2.2 * this.r;
    },
    center(){
      return this.hexbin.centers()
    },
    hexbin(){
      return d3.hexbin().extent([[2 * this.r, 2 * this.r], [this.width - 2 * this.r, this.heightNum - 2 * this.r]]).radius(this.r);
    },
    hexbin1(){
      return d3.hexbin().extent([[2 * this.r, 2 * this.r], [2 * this.r, 2 * this.r]]).radius(this.r);
    }
  },
  methods:{

  }
}
</script>

<style scoped>
.main{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end
}
.item{
  flex-grow:1;
  flex-shrink:1;
}
.sub{
  max-width: 300px;
  min-width: 200px;
  flex-grow:1;
  flex-shrink:0;
}
</style>